<template>
	<div class="banner">
		<div v-for="(item,index) in banner">
			<div @click="expand($event)" class="banner__menu">
				<i class="banner__menu--icon" :class="item.icon"></i>
					{{item.title}}
				<span class="icon_down"></span>
			</div>
			<div class="expand banner__item">
				<div>
					<router-link class="banner__item--list" v-for="(item2,index) in item.children" :to="item2.url" :key="index">
						<i class="iconfont" :class="item2.icon"></i> {{item2.title}}
					</router-link >
				</div>
			</div>
		</div>
	</div>
</template>

<script>
//	import banner from "../../../../static/json/test_banner.json"
//	import banner from "../../../../static/json/banner2.json"
	export default {
		created() {
			this.fetchBannerList();
		},
		data() {
			return {
//				banner: banner
				banner: []
			};
		},
		methods: {
			fetchBannerList() {
				var url = `${this.url}/auth/loginmenu_get_menu_list.action`;
				this.$http.get(url).then( res => {
					this.banner = res.data.result.rows;
				} );	
			},
			expand(e) {
				var el = e.target.nextElementSibling.firstElementChild;
				if (el === null) {
					return;
				}
				var height = window.getComputedStyle(el)["height"];
				var obj = e.target.nextElementSibling;
				if ( obj.flag === undefined || obj.flag == 0 ) {
					var objs = e.target.parentNode.parentNode.childNodes;
					for(var i in objs) {
						if(objs[i].childNodes && objs[i].childNodes.length > 2) {
							var o = objs[i].childNodes[2];
							o.style.height = 0;
							o.flag = 0;
						}
					}
					obj.style.height = height;
					obj.flag = 1;
				}else {
					obj.style.height = 0;
					obj.flag = 0;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		background: #444;
		width: 13%;
		position: relative;
		transition: width .5s;
		overflow: hidden;
	}
	.banner__menu {
		padding: 1.5rem 0 1.5rem 2rem;
		color: #eee;
		border-bottom: 1px solid #000;
		cursor: pointer;
	}
	.banner__menu--icon {
		margin-right: 10px;
	}
	.banner__menu>.icon_down {
		display: inline-block;
		border: 4px solid transparent;
		border-left-color: #fff;
		float: right;
		margin-right: 1rem;
		margin-top: 6px;
	}
	/*banner下面的子菜单*/
	.banner__item {
		top: 4.2rem;
		width: 100%;
		height: 0;
		overflow: hidden;
		transition: height .3s;
	}
	.banner__item--list {
		color: #eee;
		padding: 1rem 2rem;
		background: #222;
		cursor: pointer;
		display: block;
	}
	.banner__item--list:hover {
		color: #fff;
	}
	.banner__item--list i {
		margin-right: 1rem;
	}

</style>